<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="google-site-verification" content="yaeorbXgKPwp5BDegBtAJEHYWFEFE-BViWTj74gJPrw" />
<!--  -->
<link href="/css/default.css" type="text/css" rel="stylesheet" />
<!--  -->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/lang/cn.js"></script>
<script type="text/javascript" src="/js/mac/core.min.js"></script>
<title>JQuery MagicGrid 凭证类型表格示例</title>
<meta name="description" content="JQuery MagicGrid 凭证类型表格示例" />
<meta name="keywords" content="JQuery Grid Plugin" />
<script type="text/javascript" src="/js/mac/webapp.min.js"></script>
<script type="text/javascript" src="/js/jquery/mousewheel.js"></script>
<script type="text/javascript" src="/js/mac/pager.min.js"></script>
<link type="text/css" rel="stylesheet" href="/css/default/mac/grid/grid.min.css" />
<script type="text/javascript" src="/js/mac/grid.min.js"></script>
<style type="text/css">
.money { text-align: right; }
.demoPanel .viewPort { height: 420px; width: 480px; }
</style>
<script type="text/javascript">
$(function(){
	$('#nav_jump').change(function(){
		location = './' + this.value + '.html';
	}).val('voucher');
	$('.demoSource').val($('#demo').html());
});
</script>
</head>
<body>
<div id="head">
	<a href="/"><img src="/css/images/logo_s.png" alt="logo" /></a>
	<div class="title">BOARSOFT.COM</div>
	<div class="right">
		<div>
			<a href="/public/lang.php?l=en">English</a>
			|
			<a href="/public/lang.php?l=cn">简体中文</a>
			|
			<a href="http://activemq.apache.org/" target="_blank">ActiveMQ</a>
			|
			<a href="https://redis.io/" target="_blank">Redis</a>
			|
			<a href="http://www.jquery.com/" target="_blank">JQuery</a>
		</div>
	</div>
</div><div id="nav">
	<div id="nav_path">
		&nbsp;&nbsp;
		<a href="/">Home</a>
		&gt;
		<a href="/mac/js/grid">JQuery MagicGrid</a>
		&gt;
		JQuery MagicGrid 凭证类型表格示例	</div>
	<div id="nav_back">
		<a href="/mac/js/grid/doc" target="_blank">文档</a>
		|
		<a href="javascript:history.back()">后退</a>
		|
		<a href="/mac/js/grid/dl/voucher.html">下载</a>
		|
		<select id="nav_jump">
			<option value="basic">JQuery MagicGrid 基本功能示例</option>
			<option value="exp">JQuery MagicGrid 可展开式表格示例</option>
			<option value="multiHeaders">JQuery MagicGrid 多行表头示例</option>
			<option value="fixCol">JQuery MagicGrid 固定列的表格示例</option>
			<option value="voucher">JQuery MagicGrid 凭证类型表格示例</option>
			<option value="edit">JQuery MagicGrid Inline 编辑示例</option>
			<option value="keyEvt">JQuery MagicGrid 按键事件插件示例</option>
		</select>
		&nbsp;&nbsp;
	</div>
	<div class="clear"></div>
</div>
<div class="demoInfo">
	<h2 class="demoTitle">JQuery MagicGrid 凭证类型表格示例</h2>
</div>
<div id="demo" class="demoPanel"><style type="text/css">
.voucherGrid .head { height: 48px; }
.voucherGrid .ybar { margin-top: 48px; }
.voucherGrid .th { height: 48px; font-size: 18px; }
.voucherGrid .th .sizer { height: 48px; }
.voucherGrid .th[group] { height: 24px; border-left: 0px; }
<!-- -->
.voucherGrid .foot .td { background-color: #CCCCCC; height: 32px; }
.voucherGrid .foot .sum { text-align: right; font-style: bold; }
.voucherGrid table {
	border-collapse: collapse; table-layout: fixed; border: 1px;
}
.voucherGrid .td[name=debit],th[name=debit] { padding: 0px; }
.voucherGrid .td[name=credit],th[name=credit] { padding: 0px; }
.voucherGrid .bi {
	font-size: 12px; height: 20px; overflow: hidden; padding: 0px;
	border-left: 1px solid #999999; padding: 0px;
}
.voucherGrid .td .bi:first-child { border-left-width: 0px; }
.voucherGrid .th .bi {
	height: 24px; border-top: 1px solid #CCCCCC;
}
.voucherGrid .bi10 { border-left-color: red; }
</style>
<script type="text/javascript">
$(function(){
	function balanceRender(r, f){
		var bis = ['十','亿','千','百','十','万','千','百','十','元','角','分'];
		var tr = $('<tr></tr>');
		var v = (r && f)? Math.ceil(r[f]*100) + '' : 0;
		$.each(bis, function(n,c){
			var a = $('<td></td>').addClass('bi').appendTo(tr);
			if(r && f){
				if(v.length>11-n && v!='0'){
					c = v[v.length-(12-n)];
					a.css('font-weight', 'bold');
				}else{
					c = '&nbsp;';
				}
			}
			a.append(c).addClass('bi'+n);
		});
		return $('<table style="width: 144px;"></table>').append(tr);
	}
	var hd1 = balanceRender().prepend('<tr><td colspan="12">借方金额</td></tr>');
	var hd2 = balanceRender().prepend('<tr><td colspan="12">贷方金额</td></tr>');
	var vw = $('.view');
	vw.mac('grid', {
		sortLocally: true,
		headerHeight: 48,
		footerHeight: 24,
		cols : [{
			field: 'subject', title : '会计科目', width: 165
		},{
			field: 'debit', title : '借方金额', header: hd1, width: 144, sizeable: false,
			render: function(r){
				return balanceRender(r, 'debit');
			}
		},{
			field: 'credit', title : '贷方金额', header: hd2, width: 144, sizeable: false,
			render: function(r){ return balanceRender(r, 'credit'); }
		}],
		loader: {
			url: '/mac/js/grid/data.php',
			params: { pageNo: 1, pageSize: 50 },
			autoLoad: true
		},
		pagerLength: 10,
		afterLoad: function(ro){
			var dt=ct=0;
			$.each(ro, function(n,c){
				dt+=c.debit;
				ct+=c.credit;
			});
			var ft = vw.newRow({
				summary: '', subject: '<div class="sum">合计：</a>',
				debit: dt,
				credit: ct
			}).addClass('foot');
			var mm = vw.children('.main');
			mm.children('.foot').remove();
			mm.append(ft);
		}
	});
});
</script>
<div class="viewPort demoPanel">
	<div class="view grid voucherGrid"></div>
</div></div>
<textarea class="demoSource" wrap="off"></textarea>
<iframe src="/mac/js/related.php" class="related"></iframe>
<div id="foot">
Copyright © 2011. All rights reserved&nbsp;&nbsp;蜀ICP备11014774号-1&nbsp;&nbsp;
QQ: 7213571&nbsp;&nbsp;E-mail: pyh_jerry@163.com&nbsp;&nbsp;
<!-- 
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ffc0b0282216be3d16055855d8c0e72d9' type='text/javascript'%3E%3C/script%3E"));
</script>
&nbsp;&nbsp;
 -->
</div></body>
</html>
